<template>
  <Col span="16" class="main_right_items" :style="'width:'+ main_right_items_width + 'px'">
    <Scroll class="main_items_scroll" :height="clientHeight">

      <div>
        <div class="main_item">
          <p>
            <span>身份证号：<input type="number" v-model="cardNum"></span>
            <span>姓&emsp;&emsp;名：<input type="text" v-model="name"></span>
            <!--<span>性&emsp;&emsp;别：<input type="text" v-model="gender"></span>-->
            <span>
              性&emsp;&emsp;别：
              <Select v-model="gender" style="width: auto;">
                <Option v-for="item in genderList" :value="item.label" :key="item.value">{{item.label}}</Option>
              </Select>
            </span>
            <!--<span>出生日期：<input type="text" v-model="birthDate"></span>-->
          </p>
          <p>
            <!--<span>籍&emsp;&emsp;贯：<input type="text" v-model="birthPlace"></span>-->
            <span>
              出生日期：
              <DatePicker type="date" placeholder="请选择" :value="dateValue" @on-change="getDate"
                          format="yyyy-MM-dd"></DatePicker>
            </span>
            <span>
              籍&emsp;&emsp;贯：<Cascader :data="nativePlace" v-model="birthPlace" filterable
                                       style="width: auto;display: inline-block"></Cascader>
            </span>
            <span>手&nbsp;&nbsp;机&nbsp;&nbsp;号：<input type="number" v-model="telephone"></span>
          </p>
          <p>
            <span>年&emsp;&emsp;龄：<input type="number" v-model="age"></span>
            <span>家族病史：<input type="text" v-model="history"></span>
            <!--<span>性别：<input type="text"></span>-->
            <!--<span>出生日期：<input type="text"></span>-->
          </p>

          <div class="demo-upload-list" style="width: 0;" id="demo_upload_list_left">
            <img src="" alt="" id="upload_image_left">
            <div class="demo-upload-list-cover">
              <Icon type="ios-eye-outline" size="50" @click.native="handleView2(0)"></Icon>
              <Icon type="ios-trash-outline" size="50" @click.native="handleRemove2(0)"></Icon>
            </div>
          </div>
          <div class="demo-upload-list" v-for="item in leftImg">
            <template v-if="item.status === 'finished'">
              <img :src="item.url">
              <div class="demo-upload-list-cover">
                <Icon type="ios-eye-outline" size="50" @click.native="handleView(item)"></Icon>
                <Icon type="ios-trash-outline" size="50" @click.native="handleRemove(0,item)"></Icon>
              </div>
            </template>
            <template v-else>
              <Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
            </template>
          </div>
          <Upload
            ref="upload"
            :show-upload-list="false"
            :default-file-list="defaultList"
            :on-success="handleSuccess"
            :format="['jpg','jpeg','png']"
            :max-size="20480"
            :on-format-error="handleFormatError"
            :on-exceeded-size="handleMaxSize"
            :before-upload="handleBeforeUpload"
            type="drag"
            :multiple="false"
            action="http://localhost:3001/upload"
            :headers="headers"
            style="display: inline-block;width:58px;">
            <div style="width: 58px;height:58px;line-height: 58px;">
              <p style="margin: 0;height: 10px;">左眼</p>
              <Icon type="ios-camera" size="20"></Icon>
            </div>
          </Upload>


          <div class="demo-upload-list" style="width: 0;" id="demo_upload_list_right">
            <img src="" alt="" id="upload_image_right">
            <div class="demo-upload-list-cover">
              <Icon type="ios-eye-outline" size="50" @click.native="handleView2(1)"></Icon>
              <Icon type="ios-trash-outline" size="50" @click.native="handleRemove2(1)"></Icon>
            </div>
          </div>
          <div class="demo-upload-list" v-for="item in rightImg">
            <template v-if="item.status === 'finished'">
              <!--<template>-->
              <img :src="item.url">
              <div class="demo-upload-list-cover">
                <Icon type="ios-eye-outline" size="50" @click.native="handleView(item)"></Icon>
                <Icon type="ios-trash-outline" size="50" @click.native="handleRemove(1,item)"></Icon>
              </div>
            </template>
            <template v-else>
              <Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
            </template>
          </div>
          <Upload
            ref="upload2"
            :show-upload-list="false"
            :default-file-list="defaultList"
            :on-success="handleSuccess"
            :format="['jpg','jpeg','png']"
            :max-size="20480"
            :on-format-error="handleFormatError"
            :on-exceeded-size="handleMaxSize"
            :before-upload="handleBeforeUpload2"
            type="drag"
            :multiple="false"
            action="http://localhost:3001/upload"
            :headers="headers"
            style="display: inline-block;width:58px;">
            <div style="width: 58px;height:58px;line-height: 58px;">
              <p style="margin: 0;height: 10px;">右眼</p>
              <Icon type="ios-camera" size="20"></Icon>
            </div>
          </Upload>
        </div>

        <p class="test_item">
            <span class="item">
              <span>糖网病检测</span>
              <Select v-model="sugarModel" multiple style="width:200px" @on-change="getSugarItem">
                <Option v-for="item in sugarTest" :value="item.value" :key="item.value">{{ item.label }}</Option>
              </Select>
            </span>
          <span class="item">
              <span>青光眼检测</span>
              <Select v-model="eyeModel" multiple style="width:200px">
                <Option v-for="item in eyeTest" :value="item.value" :key="item.value">{{ item.label }}</Option>
              </Select>
            </span>
          <span class="item">
              <Checkbox v-model="spotDisease">老年性黄斑病变</Checkbox>
            </span>
        </p>
      </div>

      <div class="submit">
        <Button type="primary" @click="submit">筛查</Button>
      </div>

      <Modal v-model="visible">
        <img :src="imgName" v-if="visible" style="width: 100%">
      </Modal>

      <!--<div>糖网病检测</div>-->
      <!--<div>青光眼检测</div>-->
      <!--<div>老年性黄斑病变</div>-->
      <!--<div>信息检索</div>-->
      <!--<div>统计与分析</div>-->
      <!--<div>眼科知识</div>-->
    </Scroll>

  </Col>
</template>

<script>
  import {apiPre} from '../js/config';
  import axios from 'axios';

  export default {
    name: "screening",
    data() {
      return {
        main_right_items_width: 1000,
        showIcon: false,
        clientHeight: 0,
        clientHeight2: 0,
        name: '',
        gender: '',
        birthDate: '',
        birthPlace: [],
        cardNum: '',
        telephone: '',
        age: '',
        history: '',
        defaultList: [],
        imgName: '',
        visible: false,
        leftImg: [],
        rightImg: [],
        sugarTest: [
          {
            value: '00',
            label: '眼底视网膜血管分割'
          },
          {
            value: '01',
            label: '微动脉瘤检测'
          }
        ],
        sugarModel: [],
        eyeTest: [
          {
            value: '10',
            label: '视盘视杯定位'
          },
          {
            value: '11',
            label: '视盘视杯分割'
          },
          {
            value: '12',
            label: '杯盘比计算(CDR)'
          }
        ],
        eyeModel: [],
        spotDisease: false,
        headers: {
          token: window.localStorage.getItem('screeningLogin')
        },
        genderList: [
          {
            value: 0,
            label: '男'
          },
          {
            value: 1,
            label: '女'
          }
        ],
        nativePlace: [],
        dateValue: ''
      }
    },
    methods: {
      debounce(func, delay) {
        let timer;
        return function (...args) {
          if (timer) {
            clearTimeout(timer)
          }
          timer = setTimeout(() => {
            func.apply(this, args)
          }, delay)
        }
      },
      searchUsers() {
        setTimeout(() => {
          console.log('this.cardNum', this.cardNum)
        }, 1000)
      },
      getDate(e) {
        this.birthDate = e
      },
      handleView(item) {
        this.imgName = item.url;
        this.visible = true;
      },
      handleView2(num) {
        if (num == 0) {
          this.imgName = document.getElementById('upload_image_left').src;
        } else {
          this.imgName = document.getElementById('upload_image_right').src;
        }
        this.visible = true;
      },
      handleRemove2(num) {
        if (num == 0) {
          document.getElementById('upload_image_left').src = '';
          document.getElementById('demo_upload_list_left').style.width = '0'
        } else {
          document.getElementById('upload_image_right').src = '';
          document.getElementsByClassName('demo_upload_list_right').style.width = '0'
        }
      },
      handleRemove(num, file) {
        if (num == 0) {
          const fileList = this.$refs.upload.fileList;
          this.$refs.upload.fileList.splice(fileList.indexOf(file), 1);
        } else {
          const fileList = this.$refs.upload2.fileList;
          this.$refs.upload2.fileList.splice(fileList.indexOf(file), 1);
        }
      },
      handleSuccess(res, file) {
        console.log('new res', res)
        file.url = res.url;
        file.name = res.medicalNum;
      },
      handleFormatError(file) {
        this.$Notice.warning({
          title: 'The file format is incorrect',
          desc: 'File format of ' + file.name + ' is incorrect, please select jpg or png.'
        });
      },
      handleMaxSize(file) {
        this.$Notice.warning({
          title: 'Exceeding file size limit',
          desc: 'File  ' + file.name + ' is too large, no more than 2M.'
        });
      },
      handleBeforeUpload() {
        const check = this.leftImg.length < 1;
        console.log(document.getElementById('upload_image_left').src)
        if (document.getElementById('upload_image_left').src.split('/').pop()) {
          // if (document.getElementById('upload_image_left').src.split(':')[0] == 'http') {    //打包
          this.$Notice.warning({
            title: '左眼只能上传1张图片,可删掉重新上传.'
          });
          return
        }
        if (!check) {
          this.$Notice.warning({
            title: '左眼只能上传1张图片,可删掉重新上传.'
          });
        }
        return check;
      },
      handleBeforeUpload2() {
        const check = this.rightImg.length < 1;
        if (document.getElementById('upload_image_right').src.split('/').pop()) {
          // if (document.getElementById('upload_image_right').src.split(':')[0] == 'http') {     //打包
          this.$Notice.warning({
            title: '右眼只能上传1张图片,可删掉重新上传.'
          });
          return
        }
        if (!check) {
          this.$Notice.warning({
            title: '右眼只能上传1张图片,可删掉重新上传.'
          });
        }
        return check;
      },
      getSugarItem(obj) {

      },
      submit() {
        // console.log(this.birthPlace[0]+this.birthPlace[1])
        // console.log(this.gender)
        // console.log(this.birthDate)
        console.log(this.leftImg);
        var data = [
          // this.leftImg.length > 0 ? {
          //   src: this.leftImg[0].url,
          //   type: 0
          // } : '',
          // this.rightImg.length > 0 ? {
          //   src: this.rightImg[0].url,
          //   type: 1
          // } : ''

          this.leftImg.length > 0 ? {
            src: this.leftImg[0].url,
            type: 0
          } : (document.getElementById('upload_image_left').src.split('/').pop() ? {
            // } : (document.getElementById('upload_image_left').src.split(':')[0] == 'http' ? {     //打包
            src: document.getElementById('upload_image_left').src,
            type: 0
          } : ''),
          this.rightImg.length > 0 ? {
            src: this.rightImg[0].url,
            type: 1
          } : (document.getElementById('upload_image_right').src.split('/').pop() ? {
            // } : (document.getElementById('upload_image_right').src.split(':')[0] == 'http' ? {    //打包
            src: document.getElementById('upload_image_right').src,
            type: 1
          } : '')
        ]
        for (var i = 0; i < data.length; i++) {
          if (!data[i]) {
            data.splice(i, 1);
            i--;
          }
        }
        console.log(data.length);

        this.$Spin.show({
          render: (h) => {
            return h('div', [
              h('Icon', {
                'class': 'demo-spin-icon-load',
                props: {
                  type: 'ios-loading',
                  size: 50
                }
              }),
              h('div', {style: {color: '#fff', fontSize: '20px'}}, '筛查中...')
            ])
          }
        });

        axios.post(apiPre + 'screeningNew',
          {
            name: this.name,
            gender: this.gender,
            age: this.age,
            birthDate: this.birthDate,
            birthPlace: this.birthPlace[0] + '/' + this.birthPlace[1],
            cardNum: this.cardNum,
            telephone: this.telephone,
            history: this.history,
            leftImg: this.leftImg.length > 0 ? 0 : 1,
            rightImg: this.rightImg.length > 0 ? 1 : 0,
            sugarModel: this.sugarModel,
            eyeModel: this.eyeModel,
            spotDisease: this.spotDisease,
            image: data
          }, {
            // headers: {
            //   token: window.localStorage.getItem('screeningLogin')
            // }
          }).then((res) => {
          console.log(res);
          this.$Spin.hide();
        }).catch((err) => {
          console.log(err);
          this.$Spin.hide();
        })
        console.log(this.leftImg.length);
      },
    },
    mounted() {
      this.leftImg = this.$refs.upload.fileList;
      this.rightImg = this.$refs.upload2.fileList;
      this.clientHeight = document.documentElement.clientHeight - 60;
      this.clientHeight2 = document.documentElement.clientHeight - 120;
      this.username = window.localStorage.getItem('user');

      console.log('window.clientWidth', document.body.clientWidth - 260)
      this.main_right_items_width = document.body.clientWidth - 255

      this.$watch('cardNum', this.debounce((newQuery) => {
        this.$emit('cardNum', newQuery)
        console.log(this.cardNum)
        axios.get(apiPre + 'users', {params: {identify_num: this.cardNum}}).then((res) => {
          console.log('users res', res.data.data)
          if (res.data.data) {
            this.name = res.data.data.name;
            this.gender = res.data.data.gender;
            this.dateValue = res.data.data.birth_date;
            this.birthDate = res.data.data.birth_date;
            this.telephone = res.data.data.phone;
            this.age = res.data.data.age;
            this.history = res.data.data.medical_history;
            this.birthPlace = res.data.data.birth_place.split('/')
          }
        }).catch((err) => {
          console.log('users err', err)
        })
      }, 500))


      axios.post(apiPre + 'screening2', {
        image_id: 161,
        owner_id: 27,
        image_url: 'http://localhost/upload/1539847352986.jpg',
        status: 0,
        type: 0
      }).then((res) => {
        console.log('screening new', res);
      }).catch((err) => {
        console.log('screening new', err);
      })


      //从本地json文件读取数据  json文件放在static文件夹下
      // axios.get('../static/city.json').then((res)=>{
      //   // console.log('json',res)
      //   this.nativePlace = res.data.data
      // }).then((err)=>{
      //   // console.log('json err',err)
      // })


      //籍贯选择器
      var cityArr = [];
      cityArr[0] = ['北京市', '东城区', '西城区', '崇文区', '宣武区', '朝阳区', '丰台区', '石景山区', '海淀区', '门头沟区', '房山区', '通州区', '顺义区', '昌平区', '大兴区', '怀柔区', '平谷区', '密云县', '延庆县'];
      cityArr[1] = ['天津市', '和平区', '河东区', '河西区', '南开区', '河北区', '红桥区', '塘沽区', '汉沽区', '大港区', '东丽区', '西青区', '津南区', '北辰区', '武清区', '宝坻区', '宁河县', '静海县', '蓟县'];
      cityArr[2] = ['上海市', '黄浦区', '卢湾区', '徐汇区', '长宁区', '静安区', '普陀区', '闸北区', '虹口区', '杨浦区', '闵行区', '宝山区', '嘉定区', '浦东新区', '金山区', '松江区', '青浦区', '南汇区', '奉贤区', '崇明县'];
      cityArr[3] = ['重庆市', '万州区', '涪陵区', '渝中区', '大渡口区', '江北区', '沙坪坝区', '九龙坡区', '南岸区', '北碚区', '万盛区', '双桥区', '渝北区', '巴南区', '黔江区', '长寿区', '江津区', '合川区', '永川区', '南川区', '綦江县', '潼南县', '铜梁县', '大足县', '荣昌县', '璧山县', '梁平县', '城口县', '丰都县', '垫江县', '武隆县', '忠县', '开县', '云阳县', '奉节县', '巫山县', '巫溪县', '石柱土家族自治县', '秀山土家族苗族自治县', '酉阳土家族苗族自治县', '彭水苗族土家族自治县'];
      cityArr[4] = ['河北省', '石家庄市', '唐山市', '秦皇岛市', '邯郸市', '邢台市', '保定市', '张家口市', '承德市', '沧州市', '廊坊市', '衡水市'];
      cityArr[5] = ['河南省', '郑州市', '开封市', '洛阳市', '平顶山市', '安阳市', '鹤壁市', '新乡市', '焦作市', '济源市', '濮阳市', '许昌市', '漯河市', '三门峡市', '南阳市', '商丘市', '信阳市', '周口市', '驻马店市'];
      cityArr[6] = ['云南省', '昆明市', ' 曲靖市', '玉溪市', '保山市', '昭通市', '丽江市', '思茅市', '临沧市', '楚雄彝族自治州', '红河哈尼族彝族自治州', '文山壮族苗族自治州', '西双版纳傣族自治州', '大理白族自治州', '德宏傣族景颇族自治州', '怒江傈僳族自治州', '迪庆藏族自治州'];
      cityArr[7] = ['辽宁省', '沈阳市', '大连市', '鞍山市', '抚顺市', '本溪市', '丹东市', '锦州市', '营口市', '阜新市', '辽阳市', '盘锦市', '铁岭市', '朝阳市', '葫芦岛市'];
      cityArr[8] = ['黑龙江省', '哈尔滨市', '齐齐哈尔市', '鸡西市', '鹤岗市', '双鸭山市', '大庆市', '伊春市', '佳木斯市', '七台河市', '牡丹江市', '黑河市', '绥化市', '大兴安岭地区'];
      cityArr[9] = ['湖南省', '长沙市', '株洲市', '湘潭市', '衡阳市', '邵阳市', '岳阳市', '常德市', '张家界市', '益阳市', '郴州市', '永州市', '怀化市', '娄底市', '湘西土家族苗族自治州'];
      cityArr[10] = ['安徽省', '合肥市', '芜湖市', '蚌埠市', '淮南市', '马鞍山市', '淮北市', '铜陵市', '安庆市', '黄山市', '滁州市', '阜阳市', '宿州市', '巢湖市', '六安市', '亳州市', '池州', '宣城市'];
      cityArr[11] = ['山东省', '济南市', '青岛市', '淄博市', '枣庄市', '东营市', '烟台市', '潍坊市', '济宁市', '泰安市', '威海市', '日照市', '莱芜市', '临沂市', '德州市', '聊城市', '滨州市', '菏泽市'];
      cityArr[12] = ['新疆维吾尔自治区', '乌鲁木齐市', '克拉玛依市', '吐鲁番地区', '哈密地区', '昌吉回族自治州 ', '博尔塔拉蒙古自治州 ', '巴音郭楞蒙古自治州 ', '阿克苏地区', '克孜勒苏柯尔克孜自治州 ', '喀什地区', '和田地区', '伊犁哈萨克自治州', '塔城地区', '阿勒泰地区', '石河子市', '阿拉尔市', '图木舒克市', '五家渠市'];
      cityArr[13] = ['江苏省', '南京市', '无锡市', '徐州市', '常州市', '苏州市', '南通市', '连云港市', '淮安市', '盐城市', '扬州市', '镇江市', '泰州市', '宿迁市'];
      cityArr[14] = ['浙江省', '杭州市', '宁波市', '温州市', '嘉兴市', '湖州市', '绍兴市', '金华市', '衢州市', '舟山市', '台州市', '丽水市'];
      cityArr[15] = ['江西省', '南昌市', '景德镇市', '萍乡市', '九江市', '新余市', '鹰潭市', '赣州市', '吉安市', '宜春市', '抚州市', '上饶市'];
      cityArr[16] = ['湖北省', '武汉市', '黄石市', '十堰市', '宜昌市', '襄樊市', '鄂州市', '荆门市', '孝感市', '荆州市', '黄冈市', '咸宁市', '随州市', '恩施土家族苗族自治州', '仙桃市', '潜江市', '天门市', '神农架林区'];
      cityArr[17] = ['广西壮族', '南宁市', '柳州市', '桂林市', '梧州市', '北海市', '防城港市', '钦州市', '贵港市', '玉林市', '百色市', '贺州市', '河池市', '来宾市', '崇左市'];
      cityArr[18] = ['甘肃省', '兰州市', '嘉峪关市', '金昌市', '白银市', '天水市', '武威市', '张掖市', '平凉市', '酒泉市', '庆阳市', '定西市', '陇南市', '临夏回族自治州', '甘南藏族自治州'];
      cityArr[19] = ['山西省', '太原市', '大同市', '阳泉市', '长治市', '晋城市', '朔州市', '晋中市', '运城市', '忻州市', '临汾市', '吕梁市'];
      cityArr[20] = ['内蒙古自治区', '呼和浩特市', '包头市', '乌海市', '赤峰市', '通辽市', '鄂尔多斯市', '呼伦贝尔市', '巴彦淖尔市', '乌兰察布市', '兴安盟', '锡林郭勒盟', '阿拉善盟'];
      cityArr[21] = ['陕西省', '西安市', '铜川市', '宝鸡市', '咸阳市', '渭南市', '延安市', '汉中市', '榆林市', '安康市', '商洛市'];
      cityArr[22] = ['吉林省', '长春市', '吉林市', '四平市', '辽源市', '通化市', '白山市', '松原市', '白城市', '延边朝鲜族自治州'];
      cityArr[23] = ['福建省', '福州市', '厦门市', '莆田市', '三明市', '泉州市', '漳州市', '南平市', '龙岩市', '宁德市'];
      cityArr[24] = ['贵州省', '贵阳市', '六盘水市', '遵义市', '安顺市', '铜仁地区', '黔西南布依族苗族自治州', '毕节地区', '黔东南苗族侗族自治州', '黔南布依族苗族自治州'];
      cityArr[25] = ['广东省', '广州市', '韶关市', '深圳市', '珠海市', '汕头市', '佛山市', '江门市', '湛江市', '茂名市', '肇庆市', '惠州市', '梅州市', '汕尾市', '河源市', '阳江市', '清远市', '东莞市', '中山市', '潮州市', '揭阳市', '云浮市'];
      cityArr[26] = ['青海省', '西宁市', '海东地区', '海北藏族自治州', '黄南藏族自治州', '海南藏族自治州', '果洛藏族自治州', '玉树藏族自治州', '海西蒙古族藏族自治州'];
      cityArr[27] = ['西藏', '拉萨市', '昌都地区', '山南地区', '日喀则地市', '那曲地区', '阿里地区', '林芝地区'];
      cityArr[28] = ['四川省', '成都市', '自贡市', '攀枝花市', '泸州市', '德阳市', '绵阳市', '广元市', '遂宁市', '内江市', '乐山市', '南充市', '眉山市', '宜宾市', '广安市', '达州市', '雅安市', '巴中市', '资阳市', '阿坝藏族羌族自治州', '甘孜藏族自治州', '凉山彝族自治州'];
      cityArr[29] = ['宁夏回族', '银川市', '石嘴山市', '吴忠市', '固原市', '中卫市'];
      cityArr[30] = ['海南省', '海口市', '三亚市', '五指山市', '琼海市', '儋州市', '文昌市', '万宁市', '东方市', '定安县', '屯昌县', '澄迈县', '临高县', '白沙黎族自治县', '昌江黎族自治县', '乐东黎族自治县', '陵水黎族自治县', '保亭黎族苗族自治县', '琼中黎族苗族自治县'];
      cityArr[31] = ['台湾省', '台北市', '高雄市', '基隆市', '台中市', '台南市', '新竹市', '嘉义市'];
      cityArr[32] = ['香港特别行政区', '中西区', '湾仔区', '东区', '南区', '油尖旺区', '深水埗区', '九龙城区', '黄大仙区', '观塘区', '荃湾区', '葵青区', '沙田区', '西贡区', '大埔区', '北区', '元朗区', '屯门区', '离岛区'];
      cityArr[33] = ['澳门特别行政区', '澳门'];
      var data = new Array();
      for (var i = 0; i < cityArr.length; i++) {
        var temp = {
          "value": '',
          "label": '',
          "children": []
        }
        for (var j = 0; j < cityArr[i].length; j++) {
          if (j == 0) {
            temp.value = cityArr[i][j]
            temp.label = cityArr[i][j]
          } else {
            var obj = {
              "value": cityArr[i][j],
              "label": cityArr[i][j]
            }
            temp.children.push(obj)
          }
        }
        data.push(temp)
      }
      this.nativePlace = data


      // console.log('getElementById',document.getElementById('upload_image'))
      // console.log('getElementById2',document.getElementById('upload_image_left'))
      // console.log(document.getElementsByClassName('demo-upload-list')[0])
      // document.getElementsByClassName('demo-upload-list')[0].style.width = '40%'
      // // this.showIcon = true
      // document.getElementById('upload_image_left').src = 'http://202.197.66.62:20511/images/1535458773061.jpg'
    }
  }
</script>

<style scoped lang="scss">
  .ivu-menu {
    width: auto !important;
  }

  .main_wrapper {
    /*position: absolute;*/
    /*height: 100%;*/
    /*width: 100%;*/
  }

  .main_left_menu {
    height: 100%;
    width: 20%;
    ul {
      height: 100%;
    }
  }

  .main_right_items {
    width: 80%;
    height: 100%;
    padding: 0 0 0 10px;
  }

  .main_item {
    p {
      margin: 20px 0;
      span {
        display: inline-block;
        width: 33%;
        input {
          height: 30px;
          line-height: 30px;
          padding: 0 5px;
          border-radius: 4px;
          border: 1px solid #dcdee2;
        }
        input::-webkit-outer-spin-button,
        input::-webkit-inner-spin-button {
          -webkit-appearance: none;
        }
        input[type="number"] {
          -moz-appearance: textfield;
        }
      }
    }
  }

  .test_item {
    margin-top: 20px;
    .item {
      display: inline-block;
      width: 30%;
    }
  }

  .submit {
    margin-top: 40px;
    text-align: center;
    button {
      width: 200px;
    }
  }

  .demo-upload-list {
    display: inline-block;
    width: 40%;
    /*height: 60px;*/
    text-align: center;
    line-height: 60px;
    border: 1px solid transparent;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    position: relative;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
    margin-right: 4px;
  }

  .demo-upload-list img {
    width: 100%;
    height: 100%;
  }

  .demo-upload-list-cover {
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, .6);
  }

  .demo-upload-list:hover .demo-upload-list-cover {
    display: block;
  }

  .demo-upload-list-cover i {
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    margin: 0 2px;
  }

  .main_items_scroll {
    /*height: 1000px;*/
    position: relative;
    /*left: 20%;*/
    height: 100%;
    .ivu-scroll-container {
      /*height: 100%;*/
      position: absolute;
    }
  }

  .main_header {
    height: 60px;
    background-color: #fff;
    box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    img {
      width: 50px;
      vertical-align: middle
    }
    em {
      font-style: normal;
      font-size: 18px;
      margin: 0 20px;
    }
    em:hover {
      text-decoration: underline;
    }
  }

  .result_list_title {
    background-color: rgb(41, 47, 62);
    height: 30px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: 18px;
    color: #fff;
    span {
      text-align: center;
    }
  }

  .result_list_item {
    background-color: rgba(64, 71, 91, 0.5);
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: 16px;
    color: #fff;
    border-bottom: 1px solid #fff;
    padding-top: 5px;
    span {
      text-align: center;
    }
  }

  .result_detail:hover {
    text-decoration: underline;
    cursor: pointer;
  }

  .result_search {
    padding: 5px 10px;
    .item {
      margin-right: 20px;
    }
    Button {
      float: right;
    }
  }
</style>
